<template>
	<view>
		<scroll-view :style="{ height: swiperHeight + 'px' }" scroll-y="true" class="list" @scrolltolower="loadMore">
			<view class="waterfall">
				<view>
					<block v-if="index % 2 === 0" v-for="(item, index) in userList" :key="index">
						<view class="list-item"><index-list :index="index" @follow="follow" :user="item"></index-list></view>
					</block>
				</view>
				<view>
					<block v-if="index % 2 !== 0" v-for="(item, index) in userList" :key="index">
						<view  class="list-item"><index-list :index="index" @follow="follow" :user="item"></index-list></view>
					</block>
				</view>
			</view>

			<load-more :loadText="loadText" :imgs="loadImg" :loading="loading"></load-more>
		</scroll-view>
	</view>
</template>

<script>
import indexList from '../../components/index/index-list.vue';
import loadMore from '../../components/common/load-more.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		indexList,
		loadMore
	},
	data() {
		return {
			swiperHeight: 0,
			loadImg: [
				'../../static/loding/fox0.png',
				'../../static/loding/fox1.png',
				'../../static/loding/fox2.png',
				'../../static/loding/fox3.png',
				'../../static/loding/fox4.png',
				'../../static/loding/fox5.png',
				'../../static/loding/fox6.png',
				'../../static/loding/fox7.png'
			],
			loadText: '上拉加载更多',
			loading: false,
			pageNo: 1,
			userList: []
		};
	},
	methods: {
		loadMore() {
			if (this.loadText !== '上拉加载更多') return;
			this.loading = true;
			this.pageNo += 1;
			this.loadData();
		},
		loadData() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.mineFollow,
				header: constant.authHead(),
				data: {
					pageNo: this.pageNo
				},
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.userList.push(...res.data.data);
						if (res.data.data.length < 10) {
							this.loadText = '没有更多数据啦!';
						} else {
							this.loadText = '上拉加载更多';
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					this.loadText = '上拉加载更多';
					console.log(r);
				}
			});
		},
		follow(index){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.userFollow,
			    data: {
					"followId":this.userList[index].id
				},
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						if(res.data.data){
							this.userList.splice(index,1);
						}
					}else{
						showToast(res.data.msg);
					}
			    },fail(r){
					console.log(r);
				}
			});
		},
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight;
				this.loadData();
			}
		});
	}
};
</script>

<style lang="less" scoped>
.list {
	background: #f5f7fa;
}
.waterfall {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-left: 30rpx;
	.list-item {
		margin-top: 20rpx;
		margin-right: 15rpx;
	}
}
</style>
